<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘淘网 - 您的购物首选平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>


#profile-float {
    position: fixed;
    top: 80px;
    right: 40px;
    z-index: 9999;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border-radius: 12px;
    min-width: 280px;
    font-family: "微软雅黑", Arial, sans-serif;
    animation: floatIn 0.4s;
}
@keyframes floatIn {
    from { opacity: 0; transform: translateY(-30px);}
    to { opacity: 1; transform: translateY(0);}
}
.profile-float-content {
    padding: 24px 28px 20px 28px;
}
.profile-float-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #ff5000;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 18px;
}
.profile-float-header #profile-float-close {
    font-size: 22px;
    color: #888;
    transition: color 0.2s;
}
.profile-float-header #profile-float-close:hover {
    color: #ff5000;
}
.profile-float-info div {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.profile-float-info i {
    color: #ff5000;
    margin-right: 8px;
    font-size: 16px;
}


















        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        }


       
    
        
        /* 顶部导航 */
        .top-bar {
            background-color: #f8f8f8;
            height: 35px;
            border-bottom: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
            color: #999;
        }
        
        .container {
            width: 1200px;
            margin: 0 auto;
        }
        
        .top-nav {
            display: flex;
            justify-content: space-between;
        }
        
        .top-nav-left a, .top-nav-right a {
            margin: 0 10px;
            text-decoration: none;
            color: #999;
        }
        
        .top-nav-left a:hover, .top-nav-right a:hover {
            color: #ff5000;
        }
        
        /* 头部区域 */
        .header {
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            align-items: center;
        }
        
        .logo {
            width: 190px;
            height: 80px;
            background: linear-gradient(135deg, #ff5000 0%, #ff8400 100%);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 28px;
            font-weight: bold;
            margin-right: 30px;
        }
        
        .logo span {
            font-size: 14px;
            margin-top: 5px;
        }
        
        .search-box {
            flex: 1;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            height: 45px;
            border: 2px solid #ff5000;
            border-radius: 4px;
            padding: 0 15px;
            font-size: 14px;
            outline: none;
        }
        
        .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            height: 45px;
            width: 90px;
            background: #ff5000;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }



        .search-btn:hover {
            background: #ff8400;
        }
        
        .hot-words {
            margin-top: 5px;
            font-size: 12px;
        }
        
        .hot-words a {
            margin-right: 15px;
            color: #999;
            text-decoration: none;
        }
        
        .hot-words a:hover {
            color: #ff5000;
        }
        
        .user-box {
            display: flex;
            align-items: center;
            margin-left: 20px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff5000;
            font-size: 20px;
            margin-right: 10px;
        }
        
        .cart-box {
            width: 140px;
            height: 45px;
            background: #f8f8f8;
            margin-left: 20px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #ff5000;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .cart-box i {
            margin-right: 5px;
            font-size: 18px;
        }
        
        .cart-box:hover {
            background: #ff5000;
            color: white;
        }
        
        /* 主导航 */
        .main-nav {
            background: #ff5000;
            height: 45px;
            margin-top: 20px;
            border-radius: 4px;
        }
        
        .nav-list {
            display: flex;
            height: 100%;
        }
        
        .nav-item {
            color: white;
            padding: 0 25px;
            line-height: 45px;
            font-size: 16px;
            cursor: pointer;
            position: relative;
        }
        
        .nav-item:hover {
            background: rgba(255,255,255,0.2);
        }
        
        .nav-item:after {
            content: "";
            position: absolute;
            right: 0;
            top: 15px;
            height: 15px;
            width: 1px;
            background: rgba(255,255,255,0.3);
        }
        
        .nav-item:last-child:after {
            display: none;
        }
        
        /* 轮播图 */
        .banner-container {
            margin-top: 20px;
            height: 400px;
            display: flex;
        }
        
        .category-box {
            width: 220px;
            background: rgba(0,0,0,0.8);
            padding: 15px 0;
            border-radius: 4px 0 0 4px;
        }
        
        .category-item {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .category-item:hover {
            background: #ff5000;
        }
        
        .category-item i {
            font-size: 12px;
            opacity: 0.7;
        }
        
        .banner-box {
            flex: 1;
            position: relative;
            overflow: hidden;
            border-radius: 0 4px 4px 0;
        }
        
        .banner-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        
        .banner-slide.active {
            opacity: 1;
        }
        
        .banner-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }
        
        .banner-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            margin: 0 5px;
            cursor: pointer;
        }
        
        .banner-dot.active {
            background: #ff5000;
        }
        
        /* 商品区域 */
        .product-section {
            margin-top: 30px;
            background: white;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .section-title {
            font-size: 20px;
            color: #333;
            font-weight: bold;
        }
        
        .section-title i {
            color: #ff5000;
            margin-right: 8px;
        }
        
        .section-more {
            color: #999;
            font-size: 14px;
        }
        
        .section-more:hover {
            color: #ff5000;
        }
        
        .product-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        
        .product-item {
            width: 220px;
            margin: 0 15px 25px 0;
            cursor: pointer;
            transition: all 0.3s;
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .product-item:nth-child(5n) {
            margin-right: 0;
        }
        
        .product-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .product-img {
            height: 220px;
            background-color: #f8f8f8;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }
        
        .product-img .discount {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #ff5000;
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
        }
        
        .product-img img {
            max-width: 80%;
            max-height: 80%;
            transition: all 0.3s;
        }
        
        .product-item:hover .product-img img {
            transform: scale(1.05);
        }
        
        .product-info {
            padding: 15px 10px;
        }
        
        .product-title {
            font-size: 14px;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .product-price {
            color: #ff5000;
            font-size: 18px;
            font-weight: bold;
        }
        
        .product-price span {
            font-size: 12px;
        }
        
        .product-price .original {
            color: #999;
            text-decoration: line-through;
            font-size: 14px;
            margin-left: 8px;
            font-weight: normal;
        }
        
        .product-sales {
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }
        
        /* 页脚 */
        .footer {
            background: #fff;
            margin-top: 40px;
            padding: 40px 0;
            border-top: 1px solid #eee;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .footer-link {
            padding: 0 15px;
            color: #666;
            font-size: 14px;
            text-decoration: none;
            position: relative;
        }
        
        .footer-link:after {
            content: "";
            position: absolute;
            right: 0;
            top: 5px;
            height: 12px;
            width: 1px;
            background: #ddd;
        }
        
        .footer-link:last-child:after {
            display: none;
        }
        
        .footer-link:hover {
            color: #ff5000;
        }
        
        .copyright {
            text-align: center;
            color: #999;
            font-size: 12px;
            line-height: 1.8;
        }
        
        /* 学生信息 */
        .student-info {
            text-align: center;
            background: #ff5000;
            color: white;
            padding: 10px;
            font-size: 16px;
            margin-top: 20px;
            border-radius: 4px;
        }
        
        /* 登录/注册弹窗 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            width: 400px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }
        
        .modal-header {
            background: #ff5000;
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }
        
        .modal-header h2 {
            font-size: 24px;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        .tab-control {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
            color: #666;
        }
        
        .tab-item.active {
            color: #ff5000;
            border-bottom: 2px solid #ff5000;
            font-weight: bold;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .form-group input {
            width: 100%;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 15px;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }
        
        .form-group input:focus {
            border-color: #ff5000;
            box-shadow: 0 0 5px rgba(255,80,0,0.3);
        }
        
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .remember {
            display: flex;
            align-items: center;
        }
        
        .remember input {
            margin-right: 5px;
        }
        
        .forgot-password {
            color: #ff5000;
            text-decoration: none;
        }
        
        .submit-btn {
            width: 100%;
            height: 45px;
            background: #ff5000;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .submit-btn:hover {
            background: #ff8400;
        }
        
        .other-login {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }
        
        .social-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .social-btn:hover {
            background: #ff5000;
            color: white;
        }
        
        /* 购物车页面 */
        .cart-page {
            display: none;
            margin-top: 30px;
        }
        
        .cart-container {
            background: white;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .cart-header {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            font-weight: bold;
        }
        
        .cart-col-check {
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .cart-col-img {
            width: 120px;
        }
        
        .cart-col-name {
            flex: 2;
        }
        
        .cart-col-price {
            width: 150px;
            text-align: center;
        }
        
        .cart-col-quantity {
            width: 150px;
            text-align: center;
        }
        
        .cart-col-total {
            width: 150px;
            text-align: center;
        }
        
        .cart-col-action {
            width: 100px;
            text-align: center;
        }
        
        .cart-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .cart-item-img {
            width: 80px;
            height: 80px;
            background: #f8f8f8;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
        }
        
        .cart-item-img img {
            max-width: 90%;
            max-height: 90%;
        }
        
        .cart-quantity {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .quantity-btn {
            width: 25px;
            height: 25px;
            background: #f5f5f5;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 40px;
            height: 25px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 2px;
            margin: 0 5px;
        }
        
        .cart-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .cart-total {
            font-size: 18px;
            color: #ff5000;
            font-weight: bold;
        }
        
        .cart-total span {
            font-size: 24px;
        }
        
        .checkout-btn {
            width: 200px;
            height: 50px;
            background: #ff5000;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .checkout-btn:hover {
            background: #ff8400;
        }
        
        /* 订单成功页面 */
        .success-page {
            display: none;
            margin-top: 30px;
            text-align: center;
            background: white;
            border-radius: 4px;
            padding: 50px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .success-icon {
            font-size: 80px;
            color: #52c41a;
            margin-bottom: 20px;
        }
        
        .success-title {
            font-size: 28px;
            margin-bottom: 20px;
            color: #333;
        }
        
        .success-info {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.8;
        }
        
        .order-details {
            width: 500px;
            margin: 0 auto 30px;
            background: #f9f9f9;
            border-radius: 4px;
            padding: 20px;
            text-align: left;
        }
        
        .order-row {
            display: flex;
            margin-bottom: 15px;
        }
        
        .order-label {
            width: 120px;
            color: #999;
        }
        
        .order-value {
            flex: 1;
            color: #333;
            font-weight: bold;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .action-btn {
            width: 180px;
            height: 45px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #ff5000;
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background: #ff8400;
        }
        
        .btn-default {
            background: white;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .btn-default:hover {
            background: #f8f8f8;
            border-color: #ccc;
        }
    </style>
</head>
<body>


<div id="profile-float" style="display:none;">
    <div class="profile-float-content">
        <div class="profile-float-header">
            <span>个人中心</span>
            <span id="profile-float-close" style="cursor:pointer;">&times;</span>
        </div>
        <div class="profile-float-info">
            <div><i class="fas fa-user"></i> 用户名：<span id="float-username">张三</span></div>
            <div><i class="fas fa-envelope"></i> 邮箱：<span id="float-email">123456789</span></div>
            <div><i class="fas fa-phone"></i> 电话：<span id="float-phone">123456</span></div>
        </div>
    </div>
</div>














    <!-- 顶部导航栏 -->
    <div class="top-bar">
        <div class="container">
            <div class="top-nav">
                <div class="top-nav-left">
                    <a href="#" id="login-link">亲，请登录</a>
                    <a href="#" id="register-link">免费注册</a>
                </div>
                <div class="top-nav-right">
                    <a href="#">我的订单</a>
                    <a href="#">我的收藏</a>
                    <a href="#">客户服务</a>
                    <a href="#">网站导航</a>
                </div>
            </div>
        </div>
    </div>
    















<!-- 在首页内容和搜索结果页面后面添加商品详情页面结构 -->
<div class="container" id="detail-page" style="display:none;">
    <div class="product-section" style="display:flex;gap:40px;">
        <div style="flex:0 0 320px;">
            <img id="detail-img" src="images/yundongxie.jpg" alt="商品图片" style="width:320px;height:320px;object-fit:contain;border-radius:8px;background:#f8f8f8;">
        </div>
        <div style="flex:1;">
            <h2 id="detail-title" style="font-size:24px;color:#333;margin-bottom:20px;">商品标题</h2>
            <div style="font-size:20px;color:#ff5000;margin-bottom:20px;">
                价格：¥<span id="detail-price">0.00</span>
            </div>
            <div id="detail-desc" style="font-size:16px;color:#666;margin-bottom:30px;">
                商品介绍
            </div>
            <button id="detail-add-cart" class="submit-btn" style="width:200px;">加入购物车</button>
            <button id="detail-back" class="btn-default" style="width:120px;margin-left:20px;">返回</button>
        </div>
    </div>
</div>
 



















<div class="container" id="profile-page" style="display:none;">
    <div class="product-section" style="max-width:600px;margin:40px auto;">
        <div style="background:#fff;border-radius:8px;padding:32px 40px;box-shadow:0 2px 8px #eee;">
            <h2 style="font-size:24px;color:#333;margin-bottom:30px;text-align:center;">
                <i class="fas fa-user-circle" style="color:#ff5000;margin-right:10px;"></i>个人中心
            </h2>
            <div style="font-size:18px;margin-bottom:20px;">
                用户名：<span id="profile-username" style="color:#ff5000;">游客</span>
            </div>
            <div style="font-size:18px;margin-bottom:20px;">
                登录状态：<span id="profile-status" style="color:#28a745;">未登录</span>
            </div>
            <div style="font-size:18px;margin-bottom:30px;">
                <button id="profile-logout" class="btn-default" style="width:120px;">退出登录</button>
                <button id="profile-back" class="btn-default" style="width:120px;margin-left:20px;">返回首页</button>
            </div>
        </div>
    </div>
</div>

    <!-- 头部区域 -->
    <div class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    淘淘网
                    <span>taotao.com</span>
                </div>
                
                <div class="search-box">
                    <input type="text" placeholder="请输入搜索关键词">
                    <button class="search-btn">搜索</button>
                    <div class="hot-words">
                        <a href="#">手机</a>
                        <a href="#">笔记本电脑</a>
                        <a href="#">耳机</a>
                        <a href="#">卫衣</a>
                        <a href="#">运动鞋</a>
                        <a href="#">零食大礼包</a>
                    </div>
                </div>
                
                <div class="user-box">
                    <div class="user-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>欢迎您，<span id="username">游客</span></div>
                </div>
                
                <div class="cart-box" id="cart-btn">
                    <i class="fas fa-shopping-cart"></i>
                    购物车
                    <span id="cart-count">(0)</span>
                </div>
            </div>
            
            <div class="main-nav">
                <div class="nav-list">
                    <div class="nav-item">首页</div>
                    <div class="nav-item">天猫超市</div>
                    <div class="nav-item">天猫国际</div>
                    <div class="nav-item">淘特特卖</div>
                    <div class="nav-item">飞猪旅行</div>
                    <div class="nav-item">吃货天堂</div>
                    <div class="nav-item">充值中心</div>
                    <div class="nav-item">会员积分</div>
                    <div class="nav-item">电器城</div>
                    <div class="nav-item">企业采购</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        <!-- 首页内容 -->
        <div id="home-page">
            <!-- 轮播图区域 -->
            <div class="banner-container">
                <div class="category-box">
                    <div class="category-item">女装 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">男装 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">鞋靴 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">箱包 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">美妆护肤 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">手机数码 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">家用电器 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">家居家装 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">食品生鲜 <i class="fas fa-angle-right"></i></div>
                    <div class="category-item">母婴童装 <i class="fas fa-angle-right"></i></div>
                </div>
                
                <div class="banner-box">
                    <div class="banner-slide active" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);"></div>
                    <div class="banner-slide" style="background: linear-gradient(45deg, #a1c4fd, #c2e9fb);"></div>
                    <div class="banner-slide" style="background: linear-gradient(45deg, #ffecd2, #fcb69f);"></div>
                    <div class="banner-slide" style="background: linear-gradient(45deg, #84fab0, #8fd3f4);"></div>
                    
                    <div class="banner-dots">
                        <div class="banner-dot active"></div>
                        <div class="banner-dot"></div>
                        <div class="banner-dot"></div>
                        <div class="banner-dot"></div>
                    </div>
                </div>
            </div>
            
            <!-- 热卖商品 -->
            <div class="product-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-fire"></i>热卖商品
                    </div>
                    <a href="#" class="section-more">查看更多 <i class="fas fa-angle-right"></i></a>
                </div>
                
                <div class="product-list">
                    <!-- 商品1 -->
                    <div class="product-item" data-id="1" data-price="3299">
                        <div class="product-img">
                            <div class="discount">限时9折</div>
                            <img src="images/phone.jpg" alt="手机图片">
                        </div>
                        <div class="product-info">
                            <div class="product-title">新款旗舰智能手机 8GB+256GB 超高清四摄 5G全网通</div>
                            <div class="product-price">¥<span>3299</span>.00 <span class="original">¥3699.00</span></div>
                            <div class="product-sales">月销 2.5万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品2 -->
                    <div class="product-item" data-id="2" data-price="599">
                        <div class="product-img">
                            <img src="images/phone.jpg" alt="手机图片">
                        </div>
                        <div class="product-info">
                            <div class="product-title">真无线蓝牙耳机 主动降噪 长续航 适用于苹果安卓手机</div>
                            <div class="product-price">¥<span>599</span>.00</div>
                            <div class="product-sales">月销 8.2万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品3 -->
                    <div class="product-item" data-id="3" data-price="289">
                        <div class="product-img">
                            <div class="discount">新品</div>
                            <img src="images/yundongxie.jpg" alt="运动鞋">
                        </div>
                        <div class="product-info">
                            <div class="product-title">新款男士运动鞋 轻便透气 防滑耐磨 跑步健身鞋</div>
                            <div class="product-price">¥<span>289</span>.00 <span class="original">¥349.00</span></div>
                            <div class="product-sales">月销 1.6万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品4 -->
                    <div class="product-item" data-id="4" data-price="189">
                        <div class="product-img">
                            <img src="images/lianyiqun.jpg" alt="连衣裙">
                        </div>
                        <div class="product-info">
                            <div class="product-title">夏季新款连衣裙 气质收腰显瘦 法式复古碎花雪纺裙</div>
                            <div class="product-price">¥<span>189</span>.00</div>
                            <div class="product-sales">月销 3.4万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品5 -->
                    <div class="product-item" data-id="5" data-price="5299">
                        <div class="product-img">
                            <div class="discount">24期免息</div>
                            <img src="images/netbook.jpg" alt="笔记本电脑">
                        </div>
                        <div class="product-info">
                            <div class="product-title">轻薄笔记本电脑 14英寸 高性能办公学生游戏本</div>
                            <div class="product-price">¥<span>5299</span>.00</div>
                            <div class="product-sales">月销 1.2万+</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 猜你喜欢 -->
            <div class="product-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-heart"></i>猜你喜欢
                    </div>
                    <a href="#" class="section-more">换一批 <i class="fas fa-sync"></i></a>
                </div>
                
                <div class="product-list">
                    <!-- 商品1 -->
                    <div class="product-item" data-id="6" data-price="899">
                        <div class="product-img">
                            <img src="images/shoubiao.jpg" alt="智能手表">
                        </div>
                        <div class="product-info">
                            <div class="product-title">智能运动手表 心率监测 血氧检测 50米防水 GPS定位</div>
                            <div class="product-price">¥<span>899</span>.00</div>
                            <div class="product-sales">月销 5.6万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品2 -->
                    <div class="product-item" data-id="7" data-price="1299">
                        <div class="product-img">
                            <div class="discount">热卖</div>
                            <img src="images/yundongxie.jpg" alt="咖啡机">
                        </div>
                        <div class="product-info">
                            <div class="product-title">家用全自动咖啡机 意式浓缩 一键制作 智能温控</div>
                            <div class="product-price">¥<span>1299</span>.00 <span class="original">¥1599.00</span></div>
                            <div class="product-sales">月销 4.3万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品3 -->
                    <div class="product-item" data-id="8" data-price="89">
                        <div class="product-img">
                            <img src="images/shoubiao.jpg" alt="防晒霜">
                        </div>
                        <div class="product-info">
                            <div class="product-title">清爽防晒霜SPF50+ 防水防汗 面部全身隔离紫外线</div>
                            <div class="product-price">¥<span>89</span>.00</div>
                            <div class="product-sales">月销 12.5万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品4 -->
                    <div class="product-item" data-id="9" data-price="159">
                        <div class="product-img">
                            <img src="images/beibao.jpg" alt="背包">
                        </div>
                        <div class="product-info">
                            <div class="product-title">潮流双肩背包 大容量防水 学生书包 电脑旅行包</div>
                            <div class="product-price">¥<span>159</span>.00</div>
                            <div class="product-sales">月销 6.8万+</div>
                        </div>
                    </div>
                    
                    <!-- 商品5 -->
                    <div class="product-item" data-id="10" data-price="99">
                        <div class="product-img">
                            <div class="discount">爆款</div>
                            <img src="images/lingshilibao.jpg" alt="零食礼包">
                        </div>
                        <div class="product-info">
                            <div class="product-title">网红零食大礼包 30袋装 休闲小吃 办公室零食</div>
                            <div class="product-price">¥<span>99</span>.00 <span class="original">¥129.00</span></div>
                            <div class="product-sales">月销 15.3万+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 购物车页面 -->
        <div class="cart-page" id="cart-page">
            <div class="cart-container">
                <h2 style="margin-bottom: 20px;">我的购物车</h2>
                <div class="cart-header">
                    <div class="cart-col-check">
                        <input type="checkbox" id="select-all">
                    </div>
                    <div class="cart-col-img">商品</div>
                    <div class="cart-col-name"></div>
                    <div class="cart-col-price">单价</div>
                    <div class="cart-col-quantity">数量</div>
                    <div class="cart-col-total">小计</div>
                    <div class="cart-col-action">操作</div>
                </div>
                
                <div class="cart-list" id="cart-list">
                    <!-- 购物车商品列表会通过JS动态生成 -->
                </div>
                
                <div class="cart-footer">
                    <div>
                        <span>已选商品 <span id="selected-count">0</span> 件</span>
                    </div>
                    <div class="cart-total">
                        合计：¥<span id="total-price">0.00</span>
                    </div>
                    <button class="checkout-btn" id="checkout-btn">结算</button>
                </div>
            </div>
        </div>
        
        <!-- 订单成功页面 -->
        <div class="success-page" id="success-page">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h2 class="success-title">订单提交成功！</h2>
            <p class="success-info">
                感谢您在淘淘网购物！您的订单已成功提交，我们将尽快为您处理。<br>
                订单号：<span id="order-number">TT20230606123456</span>，您可以在"我的订单"中查看订单状态。
            </p>
            
            <div class="order-details">
                <div class="order-row">
                    <div class="order-label">订单金额：</div>
                    <div class="order-value">¥<span id="order-total">0.00</span></div>
                </div>
                <div class="order-row">
                    <div class="order-label">支付方式：</div>
                    <div class="order-value">支付宝支付</div>
                </div>
                <div class="order-row">
                    <div class="order-label">配送方式：</div>
                    <div class="order-value">快递配送（预计3-5个工作日送达）</div>
                </div>
                <div class="order-row">
                    <div class="order-label">收货地址：</div>
                    <div class="order-value">浙江省杭州市西湖区文一西路969号 张先生 138****5678</div>
                </div>
            </div>
            
            <div class="action-buttons">
                <button class="action-btn btn-default" id="continue-shopping">继续购物</button>
                <button class="action-btn btn-primary" id="view-order">查看订单</button>
            </div>
        </div>
        
        <!-- 学生信息 -->
        <div class="student-info">
            学号：20211234 | 姓名：张三 | 实验四：网上购物网站模仿设计与实现
        </div>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <div class="footer-links">
                <a href="#" class="footer-link">关于我们</a>
                <a href="#" class="footer-link">联系我们</a>
                <a href="#" class="footer-link">商家入驻</a>
                <a href="#" class="footer-link">营销中心</a>
                <a href="#" class="footer-link">手机淘宝</a>
                <a href="#" class="footer-link">友情链接</a>
                <a href="#" class="footer-link">销售联盟</a>
                <a href="#" class="footer-link">淘淘社区</a>
                <a href="#" class="footer-link">隐私政策</a>
            </div>
            
            <div class="copyright">
                ©2023 淘淘网 taotao.com 版权所有<br>
                网络文化经营许可证：浙网文[2023]8888-888号 | 增值电信业务经营许可证：浙B2-20230999<br>
                地址：浙江省杭州市余杭区文一西路969号 | 电话：0571-85020888
            </div>
        </div>
    </div>









































<!-- 在<body>内合适位置添加搜索结果页面结构，建议紧跟首页内容后 -->
<!-- 搜索结果页面 -->
<div class="container" id="search-page" style="display:none;">
    <div class="product-section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-search"></i> 搜索结果
            </div>
            <a href="#" class="section-more" id="back-to-home">返回首页 <i class="fas fa-angle-left"></i></a>
        </div>
        <div class="product-list" id="search-result-list">
            <!-- 搜索结果商品将通过JS动态生成 -->
        </div>
        <div id="search-empty" style="display:none; text-align:center; color:#999; padding:40px;">
            未找到相关商品，请尝试其他关键词。
        </div>
    </div>
</div>
























    <!-- 登录/注册弹窗 -->
    <div class="modal" id="login-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>欢迎来到淘淘网</h2>
                <span class="close-btn" id="close-login">&times;</span>
            </div>
            <div class="modal-body">
                <div class="tab-control">
                    <div class="tab-item active" id="login-tab">登录</div>
                    <div class="tab-item" id="register-tab">注册</div>
                </div>
                
                <div id="login-form">
                    <div class="form-group">
                        <label>用户名 / 手机号</label>
                        <input type="text" id="login-username" placeholder="请输入用户名或手机号">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" id="login-password" placeholder="请输入密码">
                    </div>
                    <div class="remember-forgot">
                        <div class="remember">
                            <input type="checkbox" id="remember-me">
                            <label for="remember-me">记住我</label>
                        </div>
                        <a href="#" class="forgot-password">忘记密码？</a>
                    </div>
                    <button class="submit-btn" id="login-submit">登录</button>
                    <div class="other-login">
                        <p>其他登录方式</p>
                        <div class="social-login">
                            <div class="social-btn">
                                <i class="fab fa-weixin"></i>
                            </div>
                            <div class="social-btn">
                                <i class="fab fa-qq"></i>
                            </div>
                            <div class="social-btn">
                                <i class="fab fa-weibo"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="register-form" style="display: none;">
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="text" id="register-phone" placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <label>设置密码</label>
                        <input type="password" id="register-password" placeholder="请设置6-20位密码">
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="password" id="register-confirm" placeholder="请再次输入密码">
                    </div>
                    <div class="form-group">
                        <label>短信验证码</label>
                        <div style="display: flex;">
                            <input type="text" id="register-code" placeholder="请输入短信验证码" style="flex: 1;">
                            <button style="width: 120px; margin-left: 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">获取验证码</button>
                        </div>
                    </div>
                    <div class="remember">
                        <input type="checkbox" id="agree-terms">
                        <label for="agree-terms">我已阅读并同意<a href="#" style="color: #ff5000;">《淘淘网用户协议》</a></label>
                    </div>
                    <button class="submit-btn" id="register-submit">注册</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局状态
        let currentUser = null;
        let cartItems = [];
        let isLoggedIn = false;
        
        // DOM元素
        const loginLink = document.getElementById('login-link');
        const registerLink = document.getElementById('register-link');
        const loginModal = document.getElementById('login-modal');
        const closeLogin = document.getElementById('close-login');
        const loginTab = document.getElementById('login-tab');
        const registerTab = document.getElementById('register-tab');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const loginSubmit = document.getElementById('login-submit');
        const registerSubmit = document.getElementById('register-submit');
        const usernameSpan = document.getElementById('username');
        const cartBtn = document.getElementById('cart-btn');
        const cartCount = document.getElementById('cart-count');
        const cartPage = document.getElementById('cart-page');
        const homePage = document.getElementById('home-page');
        const successPage = document.getElementById('success-page');
        const checkoutBtn = document.getElementById('checkout-btn');
        const continueShopping = document.getElementById('continue-shopping');
        const viewOrder = document.getElementById('view-order');
        const cartList = document.getElementById('cart-list');
        const totalPrice = document.getElementById('total-price');
        const selectedCount = document.getElementById('selected-count');
        const orderTotal = document.getElementById('order-total');
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 轮播图功能
            initCarousel();
            
            // 事件监听
            setupEventListeners();
            
            // 更新购物车数量
            updateCartCount();
        });
        
        // 初始化轮播图
        function initCarousel() {
            let currentSlide = 0;
            const slides = document.querySelectorAll('.banner-slide');
            const dots = document.querySelectorAll('.banner-dot');
            const totalSlides = slides.length;
            
            function showSlide(index) {
                slides.forEach(slide => slide.classList.remove('active'));
                dots.forEach(dot => dot.classList.remove('active'));
                
                slides[index].classList.add('active');
                dots[index].classList.add('active');
            }
            
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    currentSlide = index;
                    showSlide(currentSlide);
                });
            });
            
            setInterval(() => {
                currentSlide = (currentSlide + 1) % totalSlides;
                showSlide(currentSlide);
            }, 3000);
            
            // 商品分类悬停效果
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('mouseenter', function() {
                    this.style.background = '#ff5000';
                });
                
                item.addEventListener('mouseleave', function() {
                    this.style.background = '';
                });
            });
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 登录/注册弹窗
            loginLink.addEventListener('click', function(e) {
                e.preventDefault();
                loginModal.style.display = 'flex';
                showLoginForm();
            });
            
            registerLink.addEventListener('click', function(e) {
                e.preventDefault();
                loginModal.style.display = 'flex';
                showRegisterForm();
            });
            
            closeLogin.addEventListener('click', function() {
                loginModal.style.display = 'none';
            });
            
            loginTab.addEventListener('click', showLoginForm);
            registerTab.addEventListener('click', showRegisterForm);
            
            // 登录/注册提交
            loginSubmit.addEventListener('click', loginUser);
            registerSubmit.addEventListener('click', registerUser);
            
            // 购物车相关
            cartBtn.addEventListener('click', showCartPage);
            checkoutBtn.addEventListener('click', showSuccessPage);
            continueShopping.addEventListener('click', showHomePage);
            viewOrder.addEventListener('click', showHomePage);
            
            // 添加商品到购物车
            document.querySelectorAll('.product-item').forEach(item => {
                item.addEventListener('click', function() {
                    if (!isLoggedIn) {
                        alert('请先登录！');
                        loginModal.style.display = 'flex';
                        return;
                    }
                    
                    const productId = this.getAttribute('data-id');
                    const productName = this.querySelector('.product-title').textContent;
                    const productPrice = parseFloat(this.getAttribute('data-price'));
                    const productImg = this.querySelector('img').src;
                    
                    addToCart(productId, productName, productPrice, productImg);
                    alert('已添加到购物车！');
                });
            });
        }
        
        // 显示登录表单
        function showLoginForm() {
            loginTab.classList.add('active');
            registerTab.classList.remove('active');
            loginForm.style.display = 'block';
            registerForm.style.display = 'none';
        }
        
        // 显示注册表单
        function showRegisterForm() {
            registerTab.classList.add('active');
            loginTab.classList.remove('active');
            registerForm.style.display = 'block';
            loginForm.style.display = 'none';
        }
        
        // 用户登录
        function loginUser() {
            const username = document.getElementById('login-username').value;
            const password = document.getElementById('login-password').value;
            
            if (!username || !password) {
                alert('请输入用户名和密码！');
                return;
            }
            
            // 模拟登录成功
            currentUser = username;
            isLoggedIn = true;
            usernameSpan.textContent = username;
            loginModal.style.display = 'none';
            alert('登录成功！欢迎回来，' + username);
        }
        
        // 用户注册
        function registerUser() {
            const phone = document.getElementById('register-phone').value;
            const password = document.getElementById('register-password').value;
            const confirm = document.getElementById('register-confirm').value;
            const code = document.getElementById('register-code').value;
            
            if (!phone || !password || !confirm || !code) {
                alert('请填写所有必填项！');
                return;
            }
            
            if (password !== confirm) {
                alert('两次输入的密码不一致！');
                return;
            }
            
            if (!document.getElementById('agree-terms').checked) {
                alert('请阅读并同意用户协议！');
                return;
            }
            
            // 模拟注册成功
            currentUser = '用户_' + phone.substr(7);
            isLoggedIn = true;
            usernameSpan.textContent = currentUser;
            loginModal.style.display = 'none';
            alert('注册成功！欢迎加入淘淘网');
        }
        
        // 添加商品到购物车
        function addToCart(id, name, price, img) {
            // 检查是否已在购物车
            const existingItem = cartItems.find(item => item.id === id);
            
            if (existingItem) {
                existingItem.quantity += 1;
            } else {
                cartItems.push({
                    id: id,
                    name: name,
                    price: price,
                    img: img,
                    quantity: 1
                });
            }
            
            updateCartCount();
            if (cartPage.style.display === 'block') {
                renderCartItems();
            }
        }
        
        // 更新购物车数量
        function updateCartCount() {
            const totalItems = cartItems.reduce((total, item) => total + item.quantity, 0);
            cartCount.textContent = `(${totalItems})`;
        }
        
        // 显示购物车页面
        function showCartPage() {
            if (!isLoggedIn) {
                alert('请先登录！');
                loginModal.style.display = 'flex';
                return;
            }
            
            homePage.style.display = 'none';
            cartPage.style.display = 'block';
            successPage.style.display = 'none';
            renderCartItems();
        }
        
        // 显示首页
        function showHomePage() {
            homePage.style.display = 'block';
            cartPage.style.display = 'none';
            successPage.style.display = 'none';
        }
        
        // 显示成功页面
        function showSuccessPage() {
            if (cartItems.length === 0) {
                alert('购物车中没有商品！');
                return;
            }
            
            const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
            orderTotal.textContent = total.toFixed(2);
            
            homePage.style.display = 'none';
            cartPage.style.display = 'none';
            successPage.style.display = 'block';
            
            // 清空购物车
            cartItems = [];
            updateCartCount();
        }














   

// 个人中心相关DOM
const profilePage = document.getElementById('profile-page');
const profileUsername = document.getElementById('profile-username');
const profileStatus = document.getElementById('profile-status');
const profileLogout = document.getElementById('profile-logout');
const profileBack = document.getElementById('profile-back');

// 显示个人中心页面
function showProfilePage() {
    // 隐藏其他页面
    homePage.style.display = 'none';
    cartPage.style.display = 'none';
    successPage.style.display = 'none';
    searchPage.style.display = 'none';
    detailPage.style.display = 'none';
    profilePage.style.display = 'block';

    // 显示用户名和登录状态
    profileUsername.textContent = isLoggedIn ? currentUser : '游客';
    profileStatus.textContent = isLoggedIn ? '已登录' : '未登录';
    profileStatus.style.color = isLoggedIn ? '#28a745' : '#888';
}

// 退出登录
profileLogout.onclick = function() {
    isLoggedIn = false;
    currentUser = '';
    usernameSpan.textContent = '游客';
    alert('您已退出登录！');
    showHomePage();
    profilePage.style.display = 'none';
};

// 返回首页
profileBack.onclick = function() {
    showHomePage();
    profilePage.style.display = 'none';
};

// 可在页面顶部“欢迎您，xxx”处或菜单栏添加入口
// 例如：点击用户名跳转个人中心
document.getElementById('username').onclick = function() {
    showProfilePage();
};

// 商品详情相关DOM
const detailPage = document.getElementById('detail-page');
const detailImg = document.getElementById('detail-img');
const detailTitle = document.getElementById('detail-title');
const detailPrice = document.getElementById('detail-price');
const detailDesc = document.getElementById('detail-desc');
const detailAddCart = document.getElementById('detail-add-cart');
const detailBack = document.getElementById('detail-back');

// 商品描述数据（可根据实际情况扩展）
const productDescMap = {
    "1": "新款旗舰智能手机，8GB+256GB大内存，超高清四摄，5G全网通，畅享极速体验。",
    "2": "真无线蓝牙耳机，主动降噪，长续航，适用于苹果安卓手机，音质清晰。",
    "3": "新款男士运动鞋，轻便透气，防滑耐磨，跑步健身必备。",
    "4": "夏季新款连衣裙，气质收腰显瘦，法式复古碎花雪纺裙，清新优雅。",
    "5": "轻薄笔记本电脑，14英寸，高性能办公学生游戏本，便携实用。",
    "6": "智能运动手表，心率监测，血氧检测，50米防水，GPS定位。",
    "7": "家用全自动咖啡机，意式浓缩，一键制作，智能温控，香浓美味。",
    "8": "清爽防晒霜SPF50+，防水防汗，面部全身隔离紫外线，夏日必备。",
    "9": "潮流双肩背包，大容量防水，学生书包，电脑旅行包，实用百搭。",
    "10": "网红零食大礼包，30袋装，休闲小吃，办公室零食，丰富美味。"
};

// 监听所有商品点击，跳转详情页
function setupProductDetailEvents() {
    document.querySelectorAll('.product-item').forEach(item => {
        item.addEventListener('click', function(e) {
            // 避免点击加入购物车时也跳详情
            if (e.target.classList.contains('submit-btn')) return;
            showDetailPage(this);
            e.stopPropagation();
        });
    });
}
// 首页和搜索结果都要绑定
setupProductDetailEvents();

// 搜索结果页面商品也要绑定详情事件
function setupSearchDetailEvents() {
    document.querySelectorAll('#search-result-list .product-item').forEach(item => {
        item.addEventListener('click', function(e) {
            if (e.target.classList.contains('submit-btn')) return;
            showDetailPage(this);
            e.stopPropagation();
        });
    });
}

// 展示商品详情页
function showDetailPage(itemNode) {
    // 隐藏其他页面
    homePage.style.display = 'none';
    cartPage.style.display = 'none';
    successPage.style.display = 'none';
    searchPage.style.display = 'none';
    detailPage.style.display = 'block';

    // 获取商品信息
    const id = itemNode.getAttribute('data-id');
    const title = itemNode.querySelector('.product-title').textContent;
    const price = itemNode.getAttribute('data-price');
    const img = itemNode.querySelector('img').src;
    const desc = productDescMap[id] || "暂无商品介绍。";

    // 填充详情内容
    detailImg.src = img;
    detailTitle.textContent = title;
    detailPrice.textContent = price;
    detailDesc.textContent = desc;

    // 绑定加入购物车
    detailAddCart.onclick = function() {
        if (!isLoggedIn) {
            alert('请先登录！');
            loginModal.style.display = 'flex';
            return;
        }
        addToCart(id, title, parseFloat(price), img);
        alert('已添加到购物车！');
    };

    // 返回按钮
    detailBack.onclick = function() {
        // 返回到上一个页面（优先返回搜索页，否则首页）
        if (searchPage.style.display === 'block') {
            showSearchPage(searchInput.value.trim());
        } else {
            showHomePage();
        }
        detailPage.style.display = 'none';
    };
}

// 搜索结果渲染后，重新绑定详情事件
function showSearchPage(keyword) {
    // ...原有代码...
    // 渲染结果
    searchResultList.innerHTML = '';
    if (results.length > 0) {
        searchEmpty.style.display = 'none';
        results.forEach(node => {
            // 绑定详情事件
            node.addEventListener('click', function(e) {
                if (e.target.classList.contains('submit-btn')) return;
                showDetailPage(node);
                e.stopPropagation();
            });
            // 绑定加入购物车事件
            node.addEventListener('click', function(e) {
                if (e.target.classList.contains('submit-btn')) {
                    if (!isLoggedIn) {
                        alert('请先登录！');
                        loginModal.style.display = 'flex';
                        return;
                    }
                    const productId = node.getAttribute('data-id');
                    const productName = node.querySelector('.product-title').textContent;
                    const productPrice = parseFloat(node.getAttribute('data-price'));
                    const productImg = node.querySelector('img').src;
                    addToCart(productId, productName, productPrice, productImg);
                    alert('已添加到购物车！');
                    e.stopPropagation();
                }
            });
            searchResultList.appendChild(node);
        });
    } else {
        searchEmpty.style.display = 'block';
    }
}

const searchInput = document.querySelector('.search-box input');
const searchBtn = document.querySelector('.search-btn');
const searchPage = document.getElementById('search-page');
const searchResultList = document.getElementById('search-result-list');
const searchEmpty = document.getElementById('search-empty');
const backToHome = document.getElementById('back-to-home');

searchBtn.addEventListener('click', function() {
    const keyword = searchInput.value.trim();
    if (!keyword) {
        alert('请输入搜索关键词！');
        return;
    }
    showSearchPage(keyword);
});

searchInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
});

if (backToHome) {
    backToHome.addEventListener('click', function(e) {
        e.preventDefault();
        showHomePage();
    });
}

// 展示搜索结果页面
function showSearchPage(keyword) {
    // 隐藏其他页面
    homePage.style.display = 'none';
    cartPage.style.display = 'none';
    successPage.style.display = 'none';
    searchPage.style.display = 'block';

    // 搜索商品
    const allProducts = document.querySelectorAll('.product-item');
    let results = [];
    allProducts.forEach(item => {
        const title = item.querySelector('.product-title').textContent;
        if (title.includes(keyword)) {
            // 克隆节点用于展示
            results.push(item.cloneNode(true));
        }
    });

    // 渲染结果
    searchResultList.innerHTML = '';
    if (results.length > 0) {
        searchEmpty.style.display = 'none';
        results.forEach(node => {
            // 重新绑定点击事件（加入购物车等）
            node.addEventListener('click', function() {
                if (!isLoggedIn) {
                    alert('请先登录！');
                    loginModal.style.display = 'flex';
                    return;
                }
                const productId = node.getAttribute('data-id');
                const productName = node.querySelector('.product-title').textContent;
                const productPrice = parseFloat(node.getAttribute('data-price'));
                const productImg = node.querySelector('img').src;
                addToCart(productId, productName, productPrice, productImg);
                alert('已添加到购物车！');
            });
            searchResultList.appendChild(node);
        });
    } else {
        searchEmpty.style.display = 'block';
    }
}

// ...existing code...



















        
        // 渲染购物车商品
        function renderCartItems() {
            if (cartItems.length === 0) {
                cartList.innerHTML = '<div style="text-align: center; padding: 50px; color: #999;">购物车空空如也，快去选购商品吧！</div>';
                totalPrice.textContent = '0.00';
                selectedCount.textContent = '0';
                return;
            }
            
            let html = '';
            let total = 0;
            let count = 0;
            
            cartItems.forEach(item => {
                const itemTotal = item.price * item.quantity;
                total += itemTotal;
                count += item.quantity;
                
                html += `
                <div class="cart-item">
                    <div class="cart-col-check">
                        <input type="checkbox" checked>
                    </div>
                    <div class="cart-col-img">
                        <div class="cart-item-img">
                            <img src="${item.img}" alt="${item.name}">
                        </div>
                    </div>
                    <div class="cart-col-name">${item.name}</div>
                    <div class="cart-col-price">¥${item.price.toFixed(2)}</div>
                    <div class="cart-col-quantity">
                        <div class="cart-quantity">
                            <button class="quantity-btn">-</button>
                            <input type="text" class="quantity-input" value="${item.quantity}">
                            <button class="quantity-btn">+</button>
                        </div>
                    </div>
                    <div class="cart-col-total">¥${itemTotal.toFixed(2)}</div>
                    <div class="cart-col-action">
                        <button class="delete-btn" data-id="${item.id}">删除</button>
                    </div>
                </div>
                `;
            });
            
            cartList.innerHTML = html;
            totalPrice.textContent = total.toFixed(2);
            selectedCount.textContent = count;
            
            // 添加删除按钮事件
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    cartItems = cartItems.filter(item => item.id !== id);
                    renderCartItems();
                    updateCartCount();
                });
            });
            
            // 添加数量按钮事件
            document.querySelectorAll('.quantity-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const input = this.parentElement.querySelector('.quantity-input');
                    let quantity = parseInt(input.value);
                    
                    if (this.textContent === '+') {
                        quantity += 1;
                    } else {
                        if (quantity > 1) quantity -= 1;
                    }
                    
                    input.value = quantity;
                    
                    // 更新购物车数据
                    const itemId = this.closest('.cart-item').querySelector('.delete-btn').getAttribute('data-id');
                    const item = cartItems.find(item => item.id === itemId);
                    if (item) {
                        item.quantity = quantity;
                        renderCartItems();
                        updateCartCount();
                    }
                });
            });
        }





























        function showProfileFloat() {
    document.getElementById('float-username').textContent = '张三';
    document.getElementById('float-email').textContent = '123456789';
    document.getElementById('float-phone').textContent = '123456';
    document.getElementById('profile-float').style.display = 'block';
}
// 关闭按钮
document.getElementById('profile-float-close').onclick = function() {
    document.getElementById('profile-float').style.display = 'none';
};

// 示例：模拟登录后自动显示
// 你可以在实际登录成功后调用 showProfileFloat()
window.onload = function() {
    // 登录成功后调用
    showProfileFloat();
};
    </script>
</body>
</html>






